<html
  lang="en-US"
  class="js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"
>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="res/css/style.css"
    />
    <title>Mac OS X Lion CSS3 by Alessio Atzeni</title>
    <meta
      name="description"
      content="Mac Os X Lion with CSS3 Experiment - I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion."
    />
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-1.7.1.min.js"
    ></script>

    <script
      type="text/javascript"
      src="res/js/jquery-ui-1.8.17.custom.min.js"
    ></script>
    <script type="text/javascript" src="res/js/modernizr.js"></script>
    <script type="text/javascript" src="res/js/fix-and-clock.js"></script>
    <link
      rel="canonical"
      href="https://www.alessioatzeni.com/mac-osx-lion-css3/"
    />
    <style
      type="text/css"
      data-fbcssmodules="css:fb.css.base css:fb.css.dialog css:fb.css.iframewidget"
    >
      .fb_hidden {
        position: absolute;
        top: -10000px;
        z-index: 10001;
      }
      .fb_reposition {
        overflow: hidden;
        position: relative;
      }
      .fb_invisible {
        display: none;
      }
      .fb_reset {
        background: none;
        border: 0px;
        border-spacing: 0;
        color: #000;
        cursor: auto;
        direction: ltr;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        font-size: 11px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1;
        margin: 0;
        overflow: visible;
        padding: 0;
        text-align: left;
        text-decoration: none;
        text-indent: 0;
        text-shadow: none;
        text-transform: none;
        visibility: visible;
        white-space: normal;
        word-spacing: normal;
      }
      .fb_reset > div {
        overflow: hidden;
      }
      @keyframes fb_transform {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .fb_animate {
        animation: fb_transform 0.3s forwards;
      }
      .fb_hidden {
        position: absolute;
        top: -10000px;
        z-index: 10001;
      }
      .fb_reposition {
        overflow: hidden;
        position: relative;
      }
      .fb_invisible {
        display: none;
      }
      .fb_reset {
        background: none;
        border: 0px;
        border-spacing: 0;
        color: #000;
        cursor: auto;
        direction: ltr;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        font-size: 11px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1;
        margin: 0;
        overflow: visible;
        padding: 0;
        text-align: left;
        text-decoration: none;
        text-indent: 0;
        text-shadow: none;
        text-transform: none;
        visibility: visible;
        white-space: normal;
        word-spacing: normal;
      }
      .fb_reset > div {
        overflow: hidden;
      }
      @keyframes fb_transform {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .fb_animate {
        animation: fb_transform 0.3s forwards;
      }
      .fb_dialog {
        background: rgba(82, 82, 82, 0.7);
        position: absolute;
        top: -10000px;
        z-index: 10001;
      }
      .fb_dialog_advanced {
        border-radius: 8px;
        padding: 10px;
      }
      .fb_dialog_content {
        background: #fff;
        color: #373737;
      }
      .fb_dialog_close_icon {
        background: url(https://connect.facebook.net/rsrc.php/v4/yq/r/IE9JII6Z1Ys.png)
          no-repeat scroll 0 0 transparent;
        cursor: pointer;
        display: block;
        height: 15px;
        position: absolute;
        right: 18px;
        top: 17px;
        width: 15px;
      }
      .fb_dialog_mobile .fb_dialog_close_icon {
        left: 5px;
        right: auto;
        top: 5px;
      }
      .fb_dialog_padding {
        background-color: transparent;
        position: absolute;
        width: 1px;
        z-index: -1;
      }
      .fb_dialog_close_icon:hover {
        background: url(https://connect.facebook.net/rsrc.php/v4/yq/r/IE9JII6Z1Ys.png)
          no-repeat scroll 0 -15px transparent;
      }
      .fb_dialog_close_icon:active {
        background: url(https://connect.facebook.net/rsrc.php/v4/yq/r/IE9JII6Z1Ys.png)
          no-repeat scroll 0 -30px transparent;
      }
      .fb_dialog_iframe {
        line-height: 0;
      }
      .fb_dialog_content .dialog_title {
        background: #6d84b4;
        border: 1px solid #365899;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        margin: 0;
      }
      .fb_dialog_content .dialog_title > span {
        background: url(https://connect.facebook.net/rsrc.php/v4/yd/r/Cou7n-nqK52.gif)
          no-repeat 5px 50%;
        float: left;
        padding: 5px 0 7px 26px;
      }
      body.fb_hidden {
        height: 100%;
        left: 0px;
        margin: 0px;
        overflow: visible;
        position: absolute;
        top: -10000px;
        transform: none;
        width: 100%;
      }
      .fb_dialog.fb_dialog_mobile.loading {
        background: url(https://connect.facebook.net/rsrc.php/v4/ya/r/3rhSv5V8j3o.gif)
          white no-repeat 50% 50%;
        min-height: 100%;
        min-width: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 10001;
      }
      .fb_dialog.fb_dialog_mobile.loading.centered {
        background: none;
        height: auto;
        min-height: initial;
        min-width: initial;
        width: auto;
      }
      .fb_dialog.fb_dialog_mobile.loading.centered #fb_dialog_loader_spinner {
        width: 100%;
      }
      .fb_dialog.fb_dialog_mobile.loading.centered .fb_dialog_content {
        background: none;
      }
      .loading.centered #fb_dialog_loader_close {
        clear: both;
        color: #fff;
        display: block;
        font-size: 18px;
        padding-top: 20px;
      }
      #fb-root #fb_dialog_ipad_overlay {
        background: rgba(0, 0, 0, 0.4);
        bottom: 0;
        left: 0;
        min-height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 10000;
      }
      #fb-root #fb_dialog_ipad_overlay.hidden {
        display: none;
      }
      .fb_dialog.fb_dialog_mobile.loading iframe {
        visibility: hidden;
      }
      .fb_dialog_mobile .fb_dialog_iframe {
        position: sticky;
        top: 0;
      }
      .fb_dialog_content .dialog_header {
        background: linear-gradient(from(#738aba), to(#2c4987));
        border-bottom: 1px solid;
        border-color: #043b87;
        box-shadow: white 0px 1px 1px -1px inset;
        color: #fff;
        font: bold 14px Helvetica, sans-serif;
        text-overflow: ellipsis;
        text-shadow: rgba(0, 30, 84, 0.296875) 0px -1px 0px;
        vertical-align: middle;
        white-space: nowrap;
      }
      .fb_dialog_content .dialog_header table {
        height: 43px;
        width: 100%;
      }
      .fb_dialog_content .dialog_header td.header_left {
        font-size: 12px;
        padding-left: 5px;
        vertical-align: middle;
        width: 60px;
      }
      .fb_dialog_content .dialog_header td.header_right {
        font-size: 12px;
        padding-right: 5px;
        vertical-align: middle;
        width: 60px;
      }
      .fb_dialog_content .touchable_button {
        background: linear-gradient(from(#4267b2), to(#2a4887));
        background-clip: padding-box;
        border: 1px solid #29487d;
        border-radius: 3px;
        display: inline-block;
        line-height: 18px;
        margin-top: 3px;
        max-width: 85px;
        padding: 4px 12px;
        position: relative;
      }
      .fb_dialog_content .dialog_header .touchable_button input {
        background: none;
        border: none;
        color: #fff;
        font: bold 12px Helvetica, sans-serif;
        margin: 2px -12px;
        padding: 2px 6px 3px 6px;
        text-shadow: rgba(0, 30, 84, 0.296875) 0px -1px 0px;
      }
      .fb_dialog_content .dialog_header .header_center {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        line-height: 18px;
        text-align: center;
        vertical-align: middle;
      }
      .fb_dialog_content .dialog_content {
        background: url(https://connect.facebook.net/rsrc.php/v4/y9/r/jKEcVPZFk-2.gif)
          no-repeat 50% 50%;
        border: 1px solid #4a4a4a;
        border-bottom: 0;
        border-top: 0;
        height: 150px;
      }
      .fb_dialog_content .dialog_footer {
        background: #f5f6f7;
        border: 1px solid #4a4a4a;
        border-top-color: #ccc;
        height: 40px;
      }
      #fb_dialog_loader_close {
        float: left;
      }
      .fb_dialog.fb_dialog_mobile .fb_dialog_close_icon {
        visibility: hidden;
      }
      #fb_dialog_loader_spinner {
        animation: rotateSpinner 1.2s linear infinite;
        background-color: transparent;
        background-image: url(https://connect.facebook.net/rsrc.php/v4/yD/r/t-wz8gw1xG1.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 24px;
        width: 24px;
      }
      @keyframes rotateSpinner {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .fb_iframe_widget {
        display: inline-block;
        position: relative;
      }
      .fb_iframe_widget span {
        display: inline-block;
        position: relative;
        text-align: justify;
      }
      .fb_iframe_widget iframe {
        position: absolute;
      }
      .fb_iframe_widget_fluid_desktop,
      .fb_iframe_widget_fluid_desktop span,
      .fb_iframe_widget_fluid_desktop iframe {
        max-width: 100%;
      }
      .fb_iframe_widget_fluid_desktop iframe {
        min-width: 220px;
        position: relative;
      }
      .fb_iframe_widget_lift {
        z-index: 1;
      }
      .fb_iframe_widget_fluid {
        display: inline;
      }
      .fb_iframe_widget_fluid span {
        width: 100%;
      }
    </style>
  </head>

  <body style="cursor: auto">
    <!-- FAIL -->

    <!-- BOOT -->
    <div id="pageLoading">
      <div class="loading">
        <div class="apple-logo"></div>
        <div class="spinner"></div>
      </div>
    </div>

    <!-- LOGIN -->
    <div id="pageLogin" class="initLogExit">
      <header id="headlogin">
        <nav id="menu-dx-login">
          <ul>
            <li class="wireless"></li>
            <li class="time">
              <ul>
                <li class="hours">13</li>
                <li class="point">:</li>
                <li class="min">06</li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
      <div class="new-apple-logo"></div>

      <div class="user-avatar">
        <div id="avatar">
          <a href="#hide" class="hide" id="hide"></a>
          <a href="#show" class="show" id="show"></a>
          <div id="cover"></div>
          <div class="ava-css">
            <img src="res/img/Lion.gif" />
          </div>
          <div class="logName">
            <p>Alessio Atzeni</p>
          </div>
          <div id="switch">
            <div class="validate">
              <form action="#page">
                <input
                  type="password"
                  id="password"
                  placeholder="Password"
                  class="valid"
                />
                <input type="submit" class="charge" />
                <div class="tooltip-pass" style="display: none">
                  <p>Password: admin</p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- DESKTOP -->
    <div id="page" class="vis">
      <header id="head" class="vis">
        <nav id="menu">
          <ul>
            <li class="apple">
              <a href="#all">Apple</a>
              <ul class="sublist">
                <li>
                  <a href="#about-this-mac" data-rel="show">About This Mac</a>
                </li>
                <li>Software Updates...</li>
                <li>App Store...</li>
                <li class="divider"></li>
                <li>System Preferences...</li>
                <li>
                  Dock
                  <span class="arrow"></span>
                  <ul class="sublist-menu">
                    <li>Turn Hiding Off</li>
                    <li>Turn Magnification Off</li>
                    <li class="divider"></li>
                    <li>Position on Left</li>
                    <li>Position on Bottom</li>
                    <li>Position on Right</li>
                    <li class="divider"></li>
                    <li>Dock Preferences...</li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  Recent Items
                  <span class="arrow"></span>
                  <ul class="sublist-menu">
                    <li class="disable">Applications</li>
                    <li class="divider"></li>
                    <li class="disable">Documents</li>
                    <li class="divider"></li>
                    <li class="disable">Servers</li>
                    <li class="divider"></li>
                    <li>Clear Menu</li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>Force Quit...</li>
                <li class="divider"></li>
                <li>Sleep</li>
                <li>Restart...</li>
                <li>Shut Down...</li>
                <li class="divider"></li>
                <li>Log Out...</li>
              </ul>
            </li>
            <li class="here">
              <a href="#all">Finder</a>
              <ul class="sublist">
                <li><a href="#finder" data-rel="show">About Finder</a></li>
                <li class="divider"></li>
                <li>Preferences...</li>
                <li class="divider"></li>
                <li>Secure Empty Trash...</li>
                <li class="divider"></li>
                <li>
                  Services
                  <span class="arrow"></span>
                  <ul class="sublist-menu">
                    <li class="disable">No Services Apply</li>
                    <li>Services Preferences...</li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>Hide Finder</li>
                <li>Hide Others</li>
                <li class="disable">Show All</li>
              </ul>
            </li>
            <li>
              <a href="#all">File</a>
              <ul class="sublist">
                <li>New Finder Window</li>
                <li>New Folder</li>
                <li class="disable">New Folder with Selection</li>
                <li>New Smart Folder</li>
                <li>New Burn Folder</li>
                <li class="disable">Open</li>
                <li class="disable">
                  Open With
                  <span class="arrow"></span>
                </li>
                <li class="disable">Print</li>
                <li class="disable">Close Window</li>
                <li class="divider"></li>
                <li>Get Info</li>
                <li class="divider"></li>
                <li class="disable">Compress</li>
                <li class="divider"></li>
                <li class="disable">Duplicate</li>
                <li class="disable">Make Alias</li>
                <li class="disable">Quick Look</li>
                <li class="disable">Show Original</li>
                <li class="disable">Add to Sidebar</li>
                <li class="divider"></li>
                <li class="disable">Move to Trash</li>
                <li class="disable">Eject</li>
                <li>Burn "Desktop" to Disc...</li>
                <li class="divider"></li>
                <li>Find</li>
                <li class="divider"></li>
                <li class="disable">Label:</li>
              </ul>
            </li>
            <li>
              <a href="#all">Edit</a>
              <ul class="sublist">
                <li class="disable">Undo</li>
                <li class="disable">Redo</li>
                <li class="divider"></li>
                <li class="disable">Cut</li>
                <li class="disable">Copy</li>
                <li class="disable">Paste</li>
                <li>Select All</li>
                <li class="divider"></li>
                <li>Show Clipboard</li>
                <li class="divider"></li>
                <li>Special Characters...</li>
              </ul>
            </li>
            <li>
              <a href="#all">View</a>
              <ul class="sublist">
                <li class="disable">as Icons</li>
                <li class="disable">as List</li>
                <li class="disable">as Columns</li>
                <li class="disable">as Cover Flow</li>
                <li class="divider"></li>
                <li>Clean Up</li>
                <li>
                  Clean Up By
                  <span class="arrow"></span>
                  <ul class="sublist-menu">
                    <li>Name</li>
                    <li>Kind</li>
                    <li>Date Modified</li>
                    <li>Date Created</li>
                    <li>Size</li>
                    <li>Label</li>
                  </ul>
                </li>
                <li>
                  Sort By
                  <span class="arrow"></span>
                  <ul class="sublist-menu">
                    <li>None</li>
                    <li class="divider"></li>
                    <li>Snap to Grid</li>
                    <li class="divider"></li>
                    <li>Name</li>
                    <li>Kind</li>
                    <li>Date Last Opened</li>
                    <li>Date Added</li>
                    <li>Date Modified</li>
                    <li>Date Created</li>
                    <li>Size</li>
                    <li>Label</li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li class="disable">Hide Path Bar</li>
                <li class="disable">Hide Status Bar</li>
                <li class="disable">Hide Sidebar</li>
                <li class="divider"></li>
                <li class="disable">Toolbar</li>
                <li class="disable">Customize Toolbar...</li>
                <li class="divider"></li>
                <li>Show View Options...</li>
              </ul>
            </li>
            <li>
              <a href="#all">Go</a>
              <ul class="sublist">
                <li class="disable">Back</li>
                <li class="disable">Forward</li>
                <li>Enclosing Folder</li>
                <li class="divider"></li>
                <li>All My Files</li>
                <li>Documents</li>
                <li>Desktop</li>
                <li>Downloads</li>
                <li>Home</li>
                <li>Computer</li>
                <li>AirDrop</li>
                <li>Network</li>
                <li>Applications</li>
                <li>Utilities</li>
                <li class="divider"></li>
                <li>
                  Recent Folders
                  <span class="arrow"></span>
                  <ul class="sublist-menu">
                    <li>2012-01-10</li>
                    <li>Archieves</li>
                    <li>buildFiles</li>
                    <li>MyProjects</li>
                    <li>XCode_iPhone</li>
                    <li class="divider"></li>
                    <li>Clear Menu</li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>Go to Folder...</li>
                <li>Connect to Server...</li>
              </ul>
            </li>
            <li>
              <a href="#all">Window</a>
              <ul class="sublist">
                <li class="disable">Minimize</li>
                <li class="disable">Zoom</li>
                <li class="disable">Cycle Through Windows</li>
                <li class="divider"></li>
                <li>Bring All to Front</li>
              </ul>
            </li>
            <li><a href="#all">Help</a></li>
          </ul>
        </nav>
        <nav id="menu-dx">
          <ul>
            <li class="wireless">
              <a href="#all">Wireless</a>
            </li>
            <li class="time">
              <ul>
                <li id="DateAbbr">Tue</li>
                <li class="hour">13</li>
                <li class="point">:</li>
                <li class="mins">06</li>
              </ul>
            </li>
            <li class="username">
              <a href="#all">Alessio Atzeni</a>
            </li>
          </ul>
        </nav>
      </header>

      <div
        id="finder"
        class="window finder ui-draggable windows-vis"
        style="z-index: 4; left: 811px; top: 165.391px"
      >
        <nav class="control-window">
          <a href="#finder" class="close" data-rel="close">close</a>
          <a href="#" class="minimize">minimize</a>
          <a href="#" class="deactivate">deactivate</a>
        </nav>
        <h1 class="titleInside">About Finder</h1>
        <div class="container">
          <div class="container-inside">
            <img src="res/img/FinderIcon.png" alt="Finder" />
            <div class="about-this">
              <h2>Finder</h2>
              <p>The Macintosh Desktop Experience</p>
              <p class="small">Finder version 10.7.1</p>
            </div>
            <div class="copyright">
              <p>TM and © 1983-2011 Apple Inc</p>
              <p>All Rights Reserved</p>
            </div>
          </div>
        </div>
      </div>

      <div id="about-this-mac" class="window mac ui-draggable windows-vis">
        <nav class="control-window">
          <a href="#about-this-mac" class="close" data-rel="close">close</a>
          <a href="#" class="deactivate">deactivate</a>
          <a href="#" class="deactivate">deactivate</a>
        </nav>
        <h1 class="title-mac">About This Mac</h1>
        <div class="container">
          <div class="container-inside">
            <img src="res/img/MacOSX.png" alt="Mac OS X" />
            <div class="about-this">
              <p>Version 10.7.2</p>
              <p><a class="button about" href="#">Software Update...</a></p>
              <ul class="hardware">
                <li><strong>Processor</strong> 2 Ghz Intel Core 2 Duo</li>
                <li><strong>Memory</strong> 4 GB 1067 Mhz DDR3</li>
                <li><strong>Startup Disk</strong> Macintosh HD</li>
              </ul>
              <p><a class="button about" href="#">More Info...</a></p>
              <div class="copyright">
                <p>TM and © 1983-2011 Apple Inc</p>
                <p>All Rights Reserved</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="warning" class="window warning ui-draggable windows-vis">
        <div class="tab"></div>
        <div class="container">
          <div class="container-alert">
            <img src="res/img/Alert.png" alt="alert" />
            <div class="about-alert">
              <h2>Alert</h2>
              <p>This application cannot be used in this version</p>
              <a href="#warning" class="button blink" data-rel="close">Close</a>
            </div>
          </div>
        </div>
      </div>

      <div id="trash" class="window warning ui-draggable windows-vis">
        <div class="tab"></div>
        <div class="container">
          <div class="container-alert">
            <img
              src="res/img/FinderIcon.png"
              width="48px"
              height="48px"
              alt="alert"
            />
            <div class="about-alert">
              <h2>
                Secure Empty Trash permanently erases the items in the Trash.
                Are you sure you want to permanently erase them?
              </h2>
              <p>
                If you choose Secure Empty Trash, you can't recover the items
                unless you've backed them up using Time Machine or another
                backup program.
              </p>
              <a href="#warning" class="button blink" data-rel=""
                >Secure Empty Trash</a
              >
              <a href="#trash" class="button simple" data-rel="close">Cancel</a>
            </div>
          </div>
        </div>
      </div>

      <div id="project" class="window project ui-draggable windows-vis">
        <nav class="control-window">
          <a href="#" class="deactivate">deactivate</a>
          <a href="#" class="deactivate">deactivate</a>
          <a href="#" class="deactivate">deactivate</a>
        </nav>
        <h1 class="titleInside">About This Project</h1>
        <div class="container">
          <div class="container-inside">
            <img
              src="res/img/alessio-atzeni-logo.png"
              alt="Alessio Atzeni Logo"
            />
            <div class="about-this">
              <p class="vers">Version 1.1</p>
              <p>
                <a
                  class="button about"
                  href="https://www.alessioatzeni.com"
                  title="Alessio Atzeni Web Designer &amp; Front-end Developer"
                  >By Alessio Atzeni...</a
                >
              </p>
              <p>In this project I tried to maximize the use of CSS3.</p>
              <p>
                For the <strong>clock</strong> and the
                <strong>fake login</strong> I used javascript. (knowing the
                limitations of CSS3).
              </p>
              <p>
                To fix a limitation of the pseudo-class
                <strong>:target</strong> after login via javascript i added a
                some classes so that the <strong>desktop page</strong> remin
                visible even clicking on other links
              </p>
              <p>
                For more information about this project please visit the link
              </p>
              <p>
                <a
                  class="button about"
                  href="https://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/"
                  title="Mac OS X with CSS3"
                  >More Info...</a
                >
              </p>
            </div>
          </div>
        </div>
      </div>

      <div id="spec" class="window spec ui-draggable windows-vis">
        <nav class="control-window">
          <a href="#" class="deactivate">deactivate</a>
          <a href="#" class="deactivate">deactivate</a>
          <a href="#" class="deactivate">deactivate</a>
        </nav>
        <h1 class="titleInside">Project Specifics</h1>
        <div class="container">
          <div class="container-inside">
            <img src="res/img/folder.png" alt="Project Specifics" />
            <div class="about-this">
              <p class="vers">Version 1.1</p>
              <p><strong>New Version Featured</strong></p>
              <p>
                Replace some image elements with CSS3, Dock, hide and show
                window, fix and optimize the code
              </p>
              <p><strong>Modern Browser Supported</strong></p>
              <p>Firefox, Safari and Chrome</p>
              <p><strong>HTML 5 and CSS3</strong></p>
              <p>
                Intensive use of the CSS3 Keyframes Animations and :target
                pseudo-class and for GUI
              </p>
              <p><strong>Javascript</strong></p>
              <p>
                Clock, Fake Login and add special classes after login to remove
                animations and fix the desktop, hide and show window and and
                added classes for the dock
              </p>
              <p><strong>Draggable Window</strong></p>
              <p>Use a jQuery UI Draggable plugin</p>
              <p><strong>Images</strong></p>
              <p>
                Use images for logos, user-avatar, spinner loading, cursors,
                background images, icons
              </p>
            </div>
          </div>
        </div>
      </div>

      <div id="share" class="window share ui-draggable windows-vis">
        <nav class="control-window">
          <a href="#" class="close">close</a>
          <a href="#" class="minimize">minimize</a>
          <a href="#" class="maximize">maximize</a>
        </nav>
        <h1 class="titleInside">Share This</h1>
        <div class="container">
          <div class="container-inside">
            <ul>
              <li>
                <a
                  href="https://twitter.com/share"
                  class="twitter-share-button"
                  data-url="http://www.alessioatzeni.com/mac-osx-lion-css3/"
                  data-via="Bluxart"
                  data-related="Bluxart"
                  >Tweet</a
                >
              </li>
              <li>
                <div id="fb-root" class="fb_reset">
                  <div
                    style="
                      position: absolute;
                      top: -10000px;
                      width: 0px;
                      height: 0px;
                    "
                  >
                    <div></div>
                  </div>
                </div>
                <div
                  class="fb-like fb_iframe_widget"
                  data-href="http://www.alessioatzeni.com/mac-osx-lion-css3/"
                  data-send="false"
                  data-layout="button_count"
                  data-width="140"
                  data-show-faces="false"
                  data-font="lucida grande"
                  fb-xfbml-state="rendered"
                  fb-iframe-plugin-query="app_id=312294205481553&amp;container_width=130&amp;font=lucida%20grande&amp;href=http%3A%2F%2Fwww.alessioatzeni.com%2Fmac-osx-lion-css3%2F&amp;layout=button_count&amp;locale=it_IT&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=140"
                >
                  <span
                    style="
                      vertical-align: top;
                      width: 0px;
                      height: 0px;
                      overflow: hidden;
                    "
                    >删了一个like.pdf</span
                  >
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- DOCK -->
      <div class="dock">
        <ul>
          <li id="finderr">
            <a href="#warning" data-rel="showOp">
              <em><span>Finder</span></em>
              <img src="res/img/FinderIcon.png" alt="Finder" />
            </a>
          </li>
          <li id="launchPad">
            <a href="#warning" data-rel="showOp">
              <em><span>Launchpad</span></em>
              <img src="res/img/launchPad.png" alt="Launchpad" />
            </a>
          </li>
          <li id="expose">
            <a href="#warning" data-rel="showOp">
              <em><span>Mission Control</span></em>
              <img src="res/img/expose.png" alt="Mission Control" />
            </a>
          </li>
          <li id="appStore">
            <a href="#warning" data-rel="showOp">
              <em><span>App Store</span></em>
              <img src="res/img/appstore.png" alt="App Store" />
            </a>
          </li>
          <li id="safari">
            <a href="#warning" data-rel="showOp">
              <em><span>Safari</span></em>
              <img src="res/img/Safari.png" alt="Safari" />
            </a>
          </li>
          <li id="iChat">
            <a href="#warning" data-rel="showOp">
              <em><span>iChat</span></em>
              <img src="res/img/ichat.png" alt="iChat" />
            </a>
          </li>
          <li id="facetime">
            <a href="#warning" data-rel="showOp">
              <em><span>FaceTime</span></em>
              <img src="res/img/facetime.png" alt="Facetime" />
            </a>
          </li>
          <li id="addressBook">
            <a href="#warning" data-rel="showOp">
              <em><span>Address Book</span></em>
              <img src="res/img/address.png" alt="Address Book" />
            </a>
          </li>
          <li id="preview">
            <a href="#warning" data-rel="showOp">
              <em><span>Preview</span></em>
              <img src="res/img/preview.png" alt="Preview" />
            </a>
          </li>
          <li id="iTunes">
            <a href="#warning" data-rel="showOp">
              <em><span>iTunes</span></em>
              <img src="res/img/iTunes.png" alt="iTunes" />
            </a>
          </li>
          <li id="preferences">
            <a href="#warning" data-rel="showOp">
              <em><span>System Preferences</span></em>
              <img src="res/img/preferences.png" alt="System Preferences" />
            </a>
          </li>
          <li id="trash">
            <a href="#trash" data-rel="showOpTrash">
              <em><span>Trash</span></em>
              <img src="res/img/trash.png" alt="Trash" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
